<template>
	<view class="root-page">
		<view class="box ">
			<view class="head">
				<image class="back-icon" src="../../static/images/icon-back2-black.png" mode="" @click="Back()"></image>
				<image class="mi-icon" src="../../static/images/new-mi.png" mode=""></image>
				<text>小米上新</text>
			</view>
			<view class="touchBox">
				<block v-for="(item,index) in new_list" :key="index">
					<view class="list-item" @click="getCellItem(item)">
						<LazyLoad :src="item.img" width='1.8rem' height='1.8rem'></LazyLoad>
						<view class="item-right">
							<view class="fz32 text-ellipsis">
								{{item.product_name}}
							</view>
							<view class="product-tip text-ellipsis">
								{{item.popnew_title}}
							</view>
							<view class="product-label">
								<text class="label" v-for="(i,j) in item.custom_tag" :key="j">{{i}}</text>
							</view>
							<view class="other-info el-flex">
								<view class="product-price">
									<text class="fz24">
										￥
									</text>
									<text class="text">{{item.price}}</text>
								</view>
								<view class="date">
									<text class="month">{{item.month}}月</text>
									<text class="day">{{item.day}}日</text>
								</view>
							</view>
						</view>

					</view>

				</block>
			</view>

		</view>

	</view>
</template>

<script>
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		data() {
			return {
				page_index: 1,
				new_list: []
			};
		},
		components: {
			LazyLoad
		},
		onReachBottom() {
			this.page_index++
			this.getProductChannelList(true)
		},
		methods: {
			Back() {
				uni.navigateBack(-1)
			},
			getCellItem(item) {
				if (item.product_id) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${item.product_id}`,
					})
				}
			},
			getProductChannelList(flag) {
				this.$request.get('/getProductChannelList', {
					'page_index': this.page_index,
					'page_size': 10
				}).then((res) => {
					let list = res.data.data.new_list
					list.forEach(item => {
						let date = new Date(item.start_time * 1000);
						let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() +
							1);
						let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
						item.month = M
						item.day = D
					})
					if (flag) {
						this.new_list = this.new_list.concat(list)
					} else {
						this.new_list = list
					}

				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad() {
			this.getProductChannelList()
		}
	}
</script>

<style lang="scss" scoped>
	.root-page {
		padding-top: 0.88rem;

		view {
			line-height: 1.15;
		}

		.box {
			position: relative;
			max-width: 7.2rem;
			margin: 0 auto;
		}
	}

	.head {
		max-width: 720px !important;
		min-width: 350px !important;
		margin: 0 auto;
		height: 0.88rem;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		background: #fff;
		width: 100%;
		z-index: 100;

		.back-icon {
			position: absolute;
			left: 0.15rem;
			height: 0.7rem;
			width: 0.7rem;
		}

		.mi-icon {
			height: 0.49rem;
			width: 0.48rem;
			margin-right: 0.04rem;
		}

		text {
			font-size: .32rem;
			font-weight: 600;
			white-space: nowrap;
		}
	}

	.touchBox {
		min-height: 100%;
		height: auto;
		background: #f6f6f6;
		padding: 0.24rem 0;

		.list-item {
			box-sizing: border-box;
			margin: 0 auto 0.24rem;
			width: 6.59rem;
			background: #fff;
			border-radius: 0.08rem;
			padding: 0.24rem;
			display: flex;

			/deep/.muqian-content {
				margin-right: 0.08rem;
			}

			.product-img {
				height: 1.8rem;
				width: 1.8rem;
				margin-right: 0.08rem;
			}

			.item-right {
				-webkit-box-flex: 1;
				-ms-flex: 1;
				flex: 1;
				text-align: left;

				.fz32 {
					width: 4.2rem;
					font-size: .32rem;
					font-weight: 600;
				}

				.product-tip {
					white-space: normal;
					margin: 0.05rem 0 0.14rem;
					font-size: .24rem;
					color: rgba(0, 0, 0, .47);
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					height: 0.7rem;
					width: 4.2rem;
				}

				.product-label {
					margin-bottom: 0.31rem;

					.label {
						font-size: .2rem;
						color: #e2a03e;
						border: 0.01rem solid #e19f3e;
						padding: 0.04rem 0.08rem;
						margin-right: 0.16rem;
						border-radius: 0.08rem;
					}
				}

				.other-info {
					display: flex;

					.product-price {
						flex: 1;
						font-size: .36rem;
						color: #ff5934;

						.fz24 {
							font-size: .24rem;
							color: #ff5934;
						}

						.text {
							margin: 0px -4px;
							font-size: .36rem;
							color: #ff5934;
						}
					}

					.date {
						border-radius: 0.06rem;
						text-align: center;
						width: 1.22rem;
						height: 0.33rem;
						line-height: .33rem;
						transform: translateY(0.06rem);
						overflow: hidden;

						.month {
							background: #b07c4a;
							color: #f2e7d1;
						}

						.day {
							background: #f2e7d1;
							color: #b07c4a;
						}

						text {
							display: inline-block;
							width: 50%;
							height: 100%;
							font-size: .2rem;
						}
					}
				}
			}

		}
	}
</style>